import styles from "@styles/article.module.less";
import {
  useRequestFollowMutation,
  useRequestUnFollowMutation,
} from "@service/userEndpoints";
import classNames from "classnames";

interface Props {
  // 关注的作者的 id
  id: string | undefined;
  // 是否已经关注
  isFollow: boolean | undefined;
}

export default function Follow({ id, isFollow }: Props) {
  const [requestFollow] = useRequestFollowMutation();
  const [requestUnFollow] = useRequestUnFollowMutation();
  // 点击关注或者取消关注按钮时执行
  const followHandler = () => {
    // 判断逻辑需要的数据是否存在
    if (typeof id === "undefined" || typeof isFollow === "undefined") return;
    // 根据当前的是否关注状态决定调用关注方法还是取消关注方法
    isFollow ? requestUnFollow(id) : requestFollow(id);
  };
  return (
    <div className={styles.follow}>
      <button
        className={classNames({ [styles.active]: isFollow })}
        onClick={followHandler}
      >
        {isFollow ? "取消关注" : "关注"}
      </button>
    </div>
  );
}
